<template>
	<!-- 云店提现 -->
	<view class="withdraw-main">
		<view class="withdraw-header">
			<view class="withdraw-title">提现账户</view>
			<view class="withdraw-bank">
				<view class="withdraw-bank-title">
					<text>开户账户</text>
				</view>
				<view class="withdraw-bank-name">
					<text>**辉光（尾号1212）</text>
				</view>
			</view>
		</view>

		<view class="withdraw-momeny">
			<view class="withdraw-momeny-title">提现金额</view>
			<view class="withdraw-momeny-inputValue">
				<text class="jc">￥</text>
				<input type="number" placeholder="100元起提" class="inputSty" v-model="amountValue" />
			</view>
			<view class="withdraw-momeny-tips" @click="getstoreWithdrawApply">
				您当前的云店余额{{ balanceInfo.balance }}元，
				<text class="tipsColor" @click="allWithdraw">全部提现</text>
				(100元起提)
			</view>
		</view>

		<view class="withdraw-btn" :style="bottomStyle">
			<view class="ty">
				<view class="" style="margin-right: 6rpx" @click="isAuth = !isAuth">
					<uni-icons type="checkbox-filled" size="16" color="#2979ff" v-if="isAuth"></uni-icons>
					<uni-icons type="circle" size="16" color="#999" v-else></uni-icons>
				</view>
				我已阅读并同意
				<text class="tySty" @click="show = true">《提现须知》</text>
			</view>
			<view class="btn" :class="[amountValue ? 'active' : '']" @click="getstoreWithdrawApply">确定</view>
		</view>

		<u-popup :show="show" @close="getClose" closeable>
			<view class="noticeThatBox">
				<view class="noticeThat-header">提现须知</view>
				<view class="noticeThatContent">
					提现须知提现须知提现须知提现须知提现须知提现须知提现须知提现须知提现须知
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { storeWithdrawApply, storeSaleBalance } from '../../../api/payment/index.js';
import { formatAmount } from '../../../utils/tools.js';
export default {
	data() {
		return {
			sex: null,
			isAuth: false,
			balanceInfo: {},
			amountValue: '',
			show: false
		};
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	onLoad() {
		this.getstoreSaleBalance();
	},
	methods: {
		// 提现
		async getstoreWithdrawApply() {
			if (!this.amountValue) {
				return false;
			}
			if (!this.isAuth) {
				return uni.showToast({
					title: '请勾选协议',
					icon: 'none'
				});
			}
			try {
				const resData = await storeWithdrawApply({
					type: this.$store.state.storeType,
					money: this.amountValue
				});
				uni.showToast({
					title: '提现成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack(-1);
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},

		// 余额信息
		async getstoreSaleBalance() {
			try {
				const resData = await storeSaleBalance({
					type: this.$store.state.storeType
				});
				this.balanceInfo = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 全部提现
		async allWithdraw() {
			this.amountValue = this.balanceInfo.balance;
		},
		
		getClose(){
			this.show = false;
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.withdraw-main {
	.withdraw-header {
		background-color: #f3f3f3;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx;
		.withdraw-title {
			width: 200rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.withdraw-bank {
			.withdraw-bank-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			.withdraw-bank-name {
				font-size: 26rpx;
			}
		}
	}

	.withdraw-momeny {
		box-sizing: border-box;
		padding: 30rpx;
		.withdraw-momeny-title {
			font-size: 28rpx;
			font-weight: bold;
		}

		.withdraw-momeny-inputValue {
			display: flex;
			align-items: center;
			font-size: 50rpx;
			.jc {
				font-weight: bold;
				margin-right: 8rpx;
			}
			.inputSty {
				height: 150rpx;
				font-size: 50rpx;
			}
		}

		.withdraw-momeny-tips {
			font-size: 26rpx;
			color: #999;
			.tipsColor {
				color: #2979ff;
				margin-right: 10rpx;
			}
		}
	}
	
	.noticeThatBox{
		color: #444;
		.noticeThat-header{
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
		}
		.noticeThatContent{
			height: 60vh;
			overflow-y: scroll;
			box-sizing: border-box;
			padding: 20rpx;
			font-size: 26rpx;
		}
	}

	.withdraw-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: 0px;
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
		z-index: 99;
		.ty {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			color: #666;
			display: flex;
			align-items: center;
			.tySty {
				color: #2979ff;
			}
		}

		.btn {
			background-color: #999;
			text-align: center;
			height: 80rpx;
			border-radius: 80rpx;
			line-height: 80rpx;
			width: 100%;
			font-size: 30rpx;
			color: #fff;
		}

		.active {
			background-color: #2979ff;
		}
	}
}
</style>
